<template>
  <div
    class="flex justify-center items-center drap_bar"
    :class="props.type"
    @mousedown="drapDown"
    @mouseup="drapUp"
  >
    |
  </div>
</template>

<script setup lang="ts">
  interface propsInterface {
    maxwidth?: number;
    minwidth?: number;
    type: "left" | "right";
  }
  const props = defineProps<propsInterface>();
  const emit = defineEmits(["change"]);

  // 鼠标按下事件
  function drapDown() {
    // console.log(e);
    document.addEventListener("mousemove", drapMove);
  }

  // 鼠标移动事件
  function drapMove(e: MouseEvent) {
    let width = props.type === 'left' ? e.pageX : document.body.clientWidth - e.pageX

    // 判断最大宽度
    if (width >= (props.maxwidth as number) || width >= 250) return false

    // 判断最小宽度
    if (width <= (props.minwidth as number) || width <= 50) return false
    
    emit("change", width);
    document.addEventListener('mouseup', drapUp)
  }

  // 鼠标放开事件
  function drapUp() {
    document.removeEventListener("mousemove", drapMove);
    document.removeEventListener("mouseup", drapUp);
  }
</script>

<style lang="scss" scoped>
.drap_bar {
  position: absolute;
  right: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  background: #ededed;
  color: rgb(186, 186, 186);
  user-select: none;
  cursor: ew-resize;
  transition: all 0.3s;

  &.left {
    right: -3px;
  }

  &.right {
    left: -3px;
  }

  &:hover {
    background: #42a5f5;
    color: #fff;
  }
}
</style>
